
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账单详情</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
        color: #333;
        text-align: center;
        margin-bottom: 30px;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    th, td {
        padding: 12px 15px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }
    th {
        background-color: #4CAF50;
        color: white;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    tr:hover {
        background-color: #e9e9e9;
    }
    .card-info {
        background: #e8f5e9;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 20px;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <h1>账单详情</h1>
    <div class="card-info">尊敬的${card}账户 以下是您的消费账单</div>
    <form action="${pageContext.request.contextPath}" method="post">
        <table>
            <thead>
                <tr>
                    <th>账单月份</th>
                    <th>套餐费用</th>
                    <th>超出费用</th>
                    <th>合计金额</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>${bill.month}</td>
                    <td>${bill.package_fee}</td>
                    <td>${bill.over_fee}</td>
                    <td>${bill.total_amount}</td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>
